<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        #box {
            width: 100%;
            height: 100%;
        }

        .card {
            height: 100px;
            width: 100px;
            position: absolute;
            display: inline-block;
            color: white;
            background: blueviolet;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <!-- CSS3DObject、CSS3DSprite(精灵)、CSS2DObject的区别
    CSS3D不面向摄像机，场景缩放时，缩小放大跟随着，不被模型遮挡，通过DOM事件点击
    CSS2D面向摄像机，场景缩放时，缩小放大都一样大，不被模型遮挡，通过DOM事件点击。
    精灵面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。 -->
    <div id="box"></div>
    <!-- 标签 -->
    <div class="card" id="cardId">战斗机</div>
    <script type="importmap">
        {
            "imports": {
                "three": "./../../three/build/three.module.js",
                "three/addons/": "./../../three/examples/jsm/"
            }
        }
    </script>


    <script type="module">
        import * as THREE from 'three'
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
        import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
        let cssRenderer = new CSS3DRenderer()

        const box = document.getElementById('box')
        const scene = new THREE.Scene()
        // 相机
        const camera = new THREE.PerspectiveCamera();
        camera.position.set(200, 200, 200);
        camera.lookAt(0, 0, 0);
        // 渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
        // 环境光
        scene.add(new THREE.AmbientLight(0xffffff, 4))
        // 参考线
        scene.add(new THREE.AxesHelper(1000))

        // ----标注----
        let compDiv = document.getElementById('cardId')
        let compTag = new CSS3DObject(compDiv)


        // 加载模型 gltf/ glb 
        const loader = new GLTFLoader()
        loader.load('./zhanji.glb', (gltf) => {

            scene.add(gltf.scene)
            gltf.scene.scale.set(0.2, 0.2, 0.2)

            // 返回名战机的玻璃
            const nameNode = gltf.scene.getObjectByName("boli");
            nameNode.material.color.set(0xff00ff);//改变战机的玻璃Mesh材质颜色

            // 给战机添加文字标注
            nameNode.add(compTag)
            compTag.position.set(300, 300, 10);
            compTag.scale.set(2, 2, 2)


        })


        renderer.setSize(box.clientWidth, box.clientHeight)
        box.appendChild(renderer.domElement)


        //css3渲染区域
        cssRenderer.setSize(window.innerWidth, window.innerHeight)
        cssRenderer.domElement.style.position = 'absolute'
        cssRenderer.domElement.style.top = 0 + 'px'
        box.appendChild(cssRenderer.domElement)

        new OrbitControls(camera, cssRenderer.domElement)

        animate()
        function animate() {
            requestAnimationFrame(animate)
            renderer.render(scene, camera)
            cssRenderer.render(scene, camera)
        }

    </script>

</body>

</html>